import { Select, SelectProps, SpaceProps } from "antd"
import { Input, InputNumber, Space } from "antd"
import { FC, useEffect, useState } from "react"
import styled from "styled-components"

import { useLocale } from "@/locales"

export type RangeType = { min: number | null; max: number | null }
const DefaultChild: FC<{ changeRange: (range: RangeType) => void }> = ({ changeRange }) => {
	const [range, setRange] = useState({ min: null, max: null } as RangeType)
	useEffect(() => changeRange(range), [range])
	const { formatMessage } = useLocale()
	return (
		<Space.Compact>
			<InputNumber
				placeholder={formatMessage({ id: "tips.min" })}
				value={range.min}
				onChange={min => {
					setRange({ min, max: range.max })
				}}
			/>
			<Input
				style={{
					width: 30,
					borderLeft: 0,
					borderRight: 0,
					pointerEvents: "none"
				}}
				placeholder="~"
				disabled
			/>
			<InputNumber
				placeholder={formatMessage({ id: "tips.max" })}
				value={range.max}
				onChange={max => {
					setRange({ min: range.min, max })
				}}
			/>
		</Space.Compact>
	)
}

const FlxR = styled.div`
	display: flex;
	align-items: center;
`

// type Props = {
// 	options: SelectProps["options"]
// 	value: SelectProps["value"]
// 	onChange: SelectProps["onChange"]
// 	Child?: JSX.Element
// 	changeRange?: (range: RangeType) => void
// }
// const ComplexInput: FC<Props> = (props: Props) => {
// 	const { options, value, onChange, Child, changeRange } = props
// 	const { formatMessage } = useLocale()
// 	return (
// 		<FlxR>
// 			<Select
// 				options={options}
// 				value={value}
// 				onChange={onChange}
// 				placeholder={formatMessage({ id: "tips.pleaseSelect" })}
// 				variant="borderless"
// 				style={{ minWidth: "80px" }}
// 			/>
// 			{Child ? Child : changeRange && <DefaultChild changeRange={changeRange} />}
// 		</FlxR>
// 	)
// }
interface IComplexInputContainerProps extends SpaceProps {
	options: { label: string; value: any }[]
	value: SelectProps["value"]
	onTypeChange: SelectProps["onChange"]
	changeRange?: (range: RangeType) => void
	selectWidth?: string
}
const ComplexInput = (props: IComplexInputContainerProps) => {
	const { formatMessage } = useLocale()
	// const { value } = props
	return (
		<Space.Compact style={{ margin: "0" }}>
			<Select
				options={props.options}
				value={props.value}
				onChange={props.onTypeChange}
				placeholder={formatMessage({ id: "tips.pleaseSelect" })}
				style={{ minWidth: "80px", maxWidth: "160px", width: props.selectWidth ?? "auto" }}
			/>
			<FlxR>
				{props.children ? (
					<Space.Compact>{props.children}</Space.Compact>
				) : (
					props.changeRange && <DefaultChild changeRange={props.changeRange} />
				)}
			</FlxR>
		</Space.Compact>
	)
}

export default ComplexInput
